import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { set_name, set_data, set_childrendata } from "./store/modules/reducer";
import { get_data } from "./api/index";
import { SideBar } from "antd-mobile";
import { Fragment } from "react";

function App() {
  const dispatch = useDispatch();
  const { name, age, data, childrenData } = useSelector((state) => {
    return state.reducer;
  });

  useEffect(() => {
    // 组件挂载

    (async () => {
      let { data } = await get_data();
      dispatch(set_data(data.data));
    })();
    // 组件更新

    return () => {
      // 组件销毁
    };
  }, []);

  return (
    <div style={{ display: "flex" }}>
      {/* app 我的名字是:{name},我的年龄是:{age}
      <button onClick={() => dispatch(set_name("哈哈哈哈"))}>
        点我更改名字
      </button> */}
      <SideBar
        onChange={(key) => {
          dispatch(set_childrendata(key));
        }}
      >
        {data.map((item, index) => (
          // <></>

          <SideBar.Item key={index} title={item.name}></SideBar.Item>
        ))}
      </SideBar>
      <div>
        {/* 二级数据 */}

        {childrenData.map((item, index) => (
          // <></>

          <div>name:{item.name}</div>
        ))}
      </div>
    </div>
  );
}

export default App;
